<template>
	<view class="container">
		<view class="content">
			<!-- 月度订单概览 -->
			<view class="mounth-order">
				<view class="title">
					<text class='mounth-text'>{{ displayYearMonth }}</text>
					<text class='title-right'>总服务 <text class='order-num'>{{ serviceCalendar.orderCounts || 0 }}</text>
						单</text>
				</view>
				<view class="mount-text-box">
					<view class="mounth-preincome">
						<text class='text'>本月预收入</text>
						<text class='price'>¥{{ serviceCalendar.monthAmount || 0 }}</text>
					</view>
					<view class="mounth-preincome">
						<text class='text'>实际到账</text>
						<text class='price'>¥{{ serviceCalendar.actualAmount || 0 }}</text>
					</view>
					<view class="mounth-preincome">
						<text class='text'>其中保险缴纳金额</text>
						<text class='price'>¥{{ serviceCalendar.insuranceAmount || 0 }}</text>
					</view>
					<view class="mounth-preincome">
						<text class='text'>其中扣罚金额</text>
						<text class='price'>¥{{ serviceCalendar.fineAmount || 0 }}</text>
					</view>
				</view>
			</view>

			<!-- 日历组件 -->
			<view class="calendar-content">
				<OrderCalendar :initial-date="currentDate" :local-time="serviceCalendar.localTime || []"
					@dateChange="handleCalendarDateChange" @monthChange="handleCalendarMonthChange"
					ref="orderCalendarRef"></OrderCalendar>
			</view>

			<!-- 折叠面板 -->
			<view class="collapse-box">
				<uni-collapse>
					<uni-collapse-item titleBorder="none" style="background-color: #f5f5f5">
						<template v-slot:title>
							<view class="title-box">
								{{ selectedDateText }} <text>{{ dailyOrderCount }}</text> 单
							</view>
						</template>
						<view class="collapse-content">
							<view class="price-box">
								收入
								<text>{{ totalActualAmount }}</text>
							</view>
							<view class="drop"></view>

							<!-- 订单列表 -->
							<view class="order-item" v-for="(item, index) in dailyOrders" :key="index">
								<view class="left-content">
									<view class="order-type">{{ item.title }}</view>
									<view class="status not-arrived" v-if="item.settlementStatus === 'NO'">未到账</view>
									<view class="status arrived" v-else>已到账</view>
								</view>
								<view class="order-info">
									<view class="order-date">{{ formatDisplayDate(item.createTime) }}</view>
									<view class="order-address">{{ item.address }}</view>
								</view>
								<view class="order-amount">￥{{ item.actualAmount || 0 }}</view>
							</view>
							<view v-if="dailyOrders.length === 0" class="empty">
								暂无订单数据
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
	}
</script>
<script setup>
	// import {
	// 	defineOptions
	// } from 'vue';


	import {
		ImgBaseUrl
	} from "@/utils/domain.js";
	import {
		ref,
		onMounted,
		computed,
		watch
	} from 'vue'
	import {
		ServiceOrderList
	} from '@/api/serviceOrder.js'
	import OrderCalendar from './OrderCalendar.vue'
	// defineOptions({
	// 	styleIsolation: 'shared'
	// });
	// 核心状态管理
	const serviceCalendar = ref({}) // 日历数据
	const currentDate = ref('') // 当前日期
	const displayYearMonth = ref('') // 显示年月
	const orderCalendarRef = ref(null) // 日历组件引用
	const totalActualAmount = ref('')

	// 每日订单数据
	const dailyOrders = ref([])
	const dailyOrderCount = ref(0)
	const selectedDateText = ref('请选择日期')

	// 格式化日期显示
	const formatDisplayDate = (dateString) => {
		if (!dateString) return ''
		const date = new Date(dateString)
		return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
	}

	// 日期选择事件
	const handleCalendarDateChange = (dateInfo) => {
		fetchOrderList({
			status: 3,
			year: dateInfo.year,
			month: dateInfo.month,
			today: dateInfo.day
		})
		selectedDateText.value = `${dateInfo.year}年${dateInfo.month}月${dateInfo.day}日`
	}

	// 月份切换事件
	const handleCalendarMonthChange = (monthInfo) => {
		fetchOrderList({
			status: 3,
			year: monthInfo.year,
			month: monthInfo.month,
			today: 1 // 取当月第一天数据
		})
	}

	// 接口请求
	const fetchOrderList = async (params) => {
		try {
			const res = await ServiceOrderList(params)
			if (res.data) {
				serviceCalendar.value = res.data

				// 更新每日订单数据
				if (params.today) {
					dailyOrders.value = res.data.today || []
					dailyOrderCount.value = res.data.todayCount || 0
					totalActualAmount.value = res.data.todayIncome || 0

				}
				// 更新显示年月
				if (res.data.localTime?.length) {
					const [y, m] = res.data.localTime[0].localDate.split('-')
					displayYearMonth.value = `${y}年${m}月`
				}
			}
		} catch (error) {
			console.error('请求失败:', error)
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			})
		}
	}

	// 监听localTime变化（用于日历标记更新）
	watch(
		() => serviceCalendar.value?.localTime,
		() => {}, // 子组件已处理标记生成，此处无需逻辑
		{
			deep: true
		}
	)

	// 初始化
	onMounted(() => {
		const date = new Date()
		const year = date.getFullYear()
		const month = date.getMonth() + 1
		const day = date.getDate()

		currentDate.value = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
		selectedDateText.value = `${year}年${month}月${day}日`

		// 初始请求数据
		fetchOrderList({
			status: 3,
			year,
			month,
			today: day
		})
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		overflow-y: auto;
		padding-bottom: 20rpx;
		margin-top: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		/* 避免底部内容被截断 */

		.content {
			.calendar-content {
				position: relative;
				margin-bottom: 30rpx;
			}

			.mounth-order {
				width: 100%;
				height: 395rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;

				.title {
					display: flex;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.mounth-text {
						color: #333333;
						font-size: 36rpx;
						font-weight: 500;
					}

					.title-right {
						color: #333333;
						font-size: 24rpx;
						font-weight: 400;

						.order-num {
							color: #FF6A47;
							font-weight: bold;
							font-size: 36rpx;
						}
					}
				}

				.mount-text-box {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.mounth-preincome {
						display: flex;
						justify-content: space-between;

						.text {
							font-size: 28rpx;
							color: #666;
							font-weight: 400;
						}

						.price {
							font-weight: 500;
							color: #333333;
							font-size: 28rpx;
						}
					}
				}
			}

			.collapse-box {
				.collapse-content {
					min-height: 300rpx;
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					border-radius: 20rpx !important;
					background-color: #fff;

					.drop {
						width: 100%;
						border: 1rpx dashed #e2e2e2;
						margin: 20rpx 0rpx;
					}

					.price-box {
						display: flex;
						align-items: center;
						font-size: 30rpx;
						color: #333333;
						font-weight: 400;

						text {
							font-size: 38rpx;
							color: #333333;
							font-weight: bold;
							margin-left: 10rpx;

							&::before {
								content: "￥";
								font-size: 24rpx;
								margin-right: 4rpx;
							}
						}
					}

					.order-item {
						display: flex;
						flex-direction: column;
						padding: 15rpx 0;
						border-bottom: 1px solid #eee;
						height: 150rpx;
						justify-content: space-between;
						margin-bottom: 20rpx;

						&:last-child {
							border-bottom: none;
							margin-bottom: 0rpx !important;
						}

						.left-content {
							display: flex;
							justify-content: space-between;
							gap: 8rpx;
						}

						.order-type {
							font-size: 30rpx;
							color: #333;
							font-weight: 500;
						}

						.status {
							font-size: 30rpx;
							font-weight: 400;

							&.not-arrived {
								color: #FF6A47;
							}

							&.arrived {
								color: #6BC98D;
							}
						}

						.order-info {
							font-size: 24rpx;
							color: #999;
							display: flex;
							gap: 20rpx;
						}

						.order-amount {
							font-size: 30rpx;
							color: #333;
							font-weight: 500;
							text-align: left;
						}
					}
				}
			}
		}
	}

	::v-deep .uni-collapse-item__wrap-content.uni-collapse-item--border {
		border: none !important;
	}

	.title-box {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
		display: flex;
		padding: 0rpx 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		align-items: center;
		background-color: #f5f5f5;

		text {
			color: #FF6A47;
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	::v-deep .uni-date__x-input {
		color: #333 !important;
		font-size: 28rpx !important;
	}

	.empty {
		text-align: center;
	}

	::v-deep .uni-collapse-item__wrap {
		background-color: transparent !important;
	}
</style>